<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width" />
  <meta name="author" content="www.yanshisan.cn" />
  <meta name="robots" content="all" />
  <title>博客板</title>
  <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <link rel="stylesheet" href="../css/master.css" />
  <link rel="stylesheet" href="../css/gloable.css" />
  <link rel="stylesheet" href="../css/nprogress.css" />
  <link rel="stylesheet" href="../css/message.css" />
  <link rel="stylesheet" th:href="@{/editormd/lib/codemirror/theme/pastel-on-dark.css}">
  <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
  <link rel="shortcut icon" th:href="@{favicon.ico}" />
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
  <div class="header-fixed">
    <div class="header-inner">
      <a href="javascript:void(0)" class="header-logo" id="logo">Write</a>
      <nav class="nav" id="nav">
        <ul>
          <li><a href="/homepage">首页</a></li>
          <li><a href="/article">博客</a></li>
          <li><a href="/message">留言</a></li>
          <li><a href="/link">友链</a></li>
          <li><a href="/aboutMe">日志</a></li>
          <li><a href="/loginOut" th:if="${session.name}">退出</a></li>
          <li><a href="/toUpdateUser"><p th:inline="text" th:if="${session.name}">[[${session.name}]]</p></a></li>
          <li><a href="/toUpdateUser"  th:if="${session.name}">
            <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${session.id}+'.jpg'" class="layui-nav-img">
          </a></li>
        </ul>
      </nav>
      <a href="/html/login.html"  th:if="not ${session.name}" class="blog-user">
        <p>请登录</p>
      </a>
      <a class="phone-menu">
        <i></i>
        <i></i>
        <i></i>
      </a>
    </div>
  </div>
</header>
<div class="doc-container" id="doc-container">
  <div class="container-fixed">
    <div class="container-inner">
      <section class="msg-remark">
        <h1>博客板</h1>
        <p>
          创作写作，记录更好的自己！我们的<span style="color: red" th:text="${session.userCount}"></span>位小伙伴共同留下了<span style="color: red" th:text="${session.articlesCount}"></span>篇文章哦!
        </p>

          <form name="mdEditorForm">
            <div class="layui-form-item">
              <input type="hidden" id="article_id" name="article_id" th:value="${article_id}">
              <label class="layui-form-label">标题：</label>
              <div class="layui-input-block">
                <input id="article_title" name="article_title" required lay-verify="required"  autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">类型：</label>
              <div class="layui-input-block">
                <select id="article_type" name="article_type" required lay-verify="required" class="layui-input" >
                  <option  class="layui-btn layui-btn-sm demolist" value="我的Java路" >我的Java路</option>
                  <option  class="layui-btn layui-btn-sm demolist" value="文学杂志">文学杂志</option>
                  <option  class="layui-btn layui-btn-sm demolist" value="关于人生" >关于人生</option>
                  <option  class="layui-btn layui-btn-sm demolist" value="个人日志" >个人日志</option>
                  <option  class="layui-btn layui-btn-sm demolist" value="其他">其他</option>
                </select>
              </div>
            </div>
          <div id="article-content">
          <textarea name="article_content" id="article_content" style="display:none;"> </textarea>
          </div>
          </form>
      </section>
      </div>
    </div>
  </div>
</div>
<footer class="grid-footer">
  <div class="footer-fixed">
    <div class="copyright">
      <div class="info">
        <div class="contact">
          <a href="https://github.com/qz501664112/501664112.github.com.git" class="github" target="_blank"><i class="fa fa-github"></i></a>
          <a href="javascript:void(0)"  onclick="qqShare('http://60.205.188.140:8888/','心如止水,明镜致远','博以至客论坛',null,'http://60.205.188.140:8888/image/501664112.jpg')" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
          <a href="https://mail.qq.com" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
          <a href="weixin://" class="weixin"><i class="fa fa-weixin"></i></a>
        </div>
        <p class="mt05">
          Copyright &copy; 2021-2021 初学者 <a style="color: white" href="http://www.mygirlfriends.cn/">mygirlfriends.cn</a> 版权所有 ICP证:<a style="color: white" href="https://beian.miit.gov.cn/">赣ICP备2021004732号</a>
        </p>
      </div>
    </div>
  </div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="../js/yss/gloable.js"></script>
<script src="../js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
<script src="../js/pagemessage.js"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script>NProgress.start();</script>
<script>
  window.onload = function () {
    NProgress.done();
  };
</script>

<script type="text/javascript" th:inline="javascript">
  var testEditor;
  //window.onload = function(){ }
  $(function() {

    testEditor = editormd("article-content", {
      width : "95%",
      height : 600,
      syncScrolling : "single",
      path : "../editormd/lib/",
      saveHTMLToTextarea : true,
      emoji: true,
      theme: "default",//工具栏主题
      previewTheme: "default",//预览主题
      editorTheme: "pastel-on-default",//编辑主题
      tex : true,
      flowChart : true,
      sequenceDiagram : true,
      //图片上传
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : '/oss/articleUpload?fileName='+[[${article_id}]],
      onload : function() {
        console.log('onload', this);
      },
      /*指定需要显示的功能按钮*/
      toolbarIcons : function() {
        return ["undo","redo","|",
          "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
          "h1","h2","h3","h4","h5","h6","|",
          "list-ul","list-ol","hr","|",
          "link","reference-link","image","code","preformatted-text",
          "code-block","table","datetime","emoji","html-entities","pagebreak","|",
          "goto-line","watch","preview","fullscreen","clear","search","|",
          "help","info","releaseIcon", "index"]
      },
      /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
      toolbarIconTexts : {
        releaseIcon : "<span bgcolor=\"gray\">发布</span>",
        index : "<span bgcolor=\"red\">返回首页</span>",
      },

      /*给自定义按钮指定回调函数*/
      toolbarHandlers:{
        releaseIcon : function(cm, icon, cursor, selection) {
          if([[${session.id}]] == null){
            alert("请登录后在发布!")
          }else {
            //表单提交
            mdEditorForm.method = "post";
            mdEditorForm.action = "/addArticle";//提交至服务器的路径
            mdEditorForm.submit();
          }
        },
        success : function(data){
          if (data.msg==200){
            alert("提交成功请刷新页面!")

          }else {
            alert("提交失败!!")
          }
          window.location.href = '/';
        },
      }
    });
  });
</script>
<script type="text/javascript">
  function qqShare(url,title,summary,pics){
    var urlPath = "https://connect.qq.com/widget/shareqq/index.html?url="+ encodeURI(url) +
            "&desc=&title=" + title +
            "&summary=" + summary +
            "&pics=" + pics;
    window.open (urlPath, 'qq分享', 'height=637, width=1053, top=195,left=459, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
  }
</script>
</body>
</html>
